<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认证审核</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"
          name="viewport">
<!--    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
<!--    <script src="https://unpkg.com/vant@2.12.54/lib/vant.min.js"></script>-->
      <link rel="stylesheet" href="./vant.css"/>
      <script src="./vue.js"></script>
      <script src="./vant.js"></script>
</head>
<body>
<div id="app">
    <div class="pageIndex">
        <div class="title">基本信息</div>
        <div class="list" v-if="Object.keys(formData).length > 0">
            <div class="item" v-for="(item, index) in list" :key="index">
                <div class="label">{{item.label}}</div>
                <div class="value">
                    <!-- 文本  -->
                    <div class="text" v-if="item.type === 'input'">
                        {{formData[item.key]}}
                    </div>
                    <!--  图片-->
                    <div class="img" v-else-if="item.type === 'image'" @click="preView(formData[item.key])">
                        <img :src="formData[item.key]" alt="">
                    </div>
                    <!--富文本-->
                    <div class="richText" v-else-if="item.type === 'richText'" v-html="formData[item.key]"></div>

                </div>
            </div>
        </div>

        <div class="btn_box" v-if="formData.status === 0">
            <van-button class="btn" type="primary" round @click="pass">审核通过</van-button>
            <van-button class="btn" type="danger" round @click="cancel">拒绝</van-button>
        </div>
        <!--弹窗-->
        <van-dialog title="拒绝" v-model="show" show-cancel-button @confirm="reject" @cancel="show = false">
            <div style="padding: 15px 0">
                <van-form>
                    <van-field
                            v-model="message"
                            rows="2"
                            autosize
                            label="拒绝原因："
                            type="textarea"
                            maxlength="50"
                            placeholder="请输入拒绝原因"
                            show-word-limit
                    />
                </van-form>
            </div>
        </van-dialog>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data() {
            const headers = {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json;charset=UTF-8',
                'token': ''
            }
            // 审核状态 1：通过 -1：拒绝
            const status =  {
                PASS: 1,
                REJECT: '-1'
            }
            return {
                headers,
                status,
                show: false,
                message: '',
                base_url: 'https://study.hnshengzhong.cn/api/activity_audit/',
                formData: {},
                list: [
                    {label: '活动名称', key: 'title', type: 'input'},
                    {label: '报名时间', key: 'signup_time', type: 'input'},
                    {label: '活动时间', key: 'active_time', type: 'input'},
                    {label: '参加人数', key: 'number', type: 'input'},
                    {label: '价格/人', key: 'price', type: 'input'},
                    {label: '活动封面', key: 'image', type: 'image'},
                    {label: '活动详情', key: 'content', type: 'richText'},
                ],
            }
        },
        created() {
            const token = this.getQueryStringRegExp('token')
            // const token = '2aeeb9c5b302cb151c225bd88b6b64da'
            if (token) {
                this.headers = {
                    ...this.headers,
                    token: token,
                }
                this.getInfo()
            }
        },
        mounted() {

        },
        methods: {
            // 图片预览
            preView(url) {
                const list = [url]
                vant.ImagePreview(list)
            },
            //截取url参数
            getQueryStringRegExp(name) {
                var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i")
                if (reg.test(location.href)) {
                    return unescape(RegExp.$2.replace(/\+/g, " "))
                }
                return ""
            },
            // 认证详情
            getInfo() {
                const url = `detail?token=${this.headers.token}`
                fetch(this.base_url + url, {
                    method: 'get',
                    headers: {...this.headers}
                }).then(res => res.text()).then(res => {
                    const data = JSON.parse(res)
                    if (data.code === 1) {
                        this.formData = data.data
                        this.formData.signup_time = `${this.getTime(this.formData.signup_start_time)} 至 ${this.getTime(this.formData.signup_end_time)}`
                        this.formData.active_time = `${this.getTime(this.formData.start_time)} 至 ${this.getTime(this.formData.end_time)}`
                        console.log(this.formData)
                    } else {
                        vant.Toast.fail(data.msg);
                    }
                })
            },
            // 审核通过
            pass() {
                const url = `operate?token=${this.headers.token}`
                const params = {
                    status: this.status.PASS
                }
                fetch(this.base_url + url, {
                    method: 'post',
                    headers: {...this.headers},
                    body: JSON.stringify(params),
                }).then(res => res.text()).then(res => {
                    const data = JSON.parse(res)
                    if (data.code === 1) {
                        vant.Toast.success('审核成功');
                        this.getInfo();
                    } else {
                        vant.Toast.fail(data.msg);
                    }
                })
            },
            cancel() {
                this.show = true
            },
            // 审核拒绝
            reject() {
                if (!this.message) {
                    vant.Toast('请输入拒绝原因！');
                    return false
                }
                const url = `operate?token=${this.headers.token}`
                const params = {
                    status: this.status.REJECT,
                    fail_message: this.message
                }
                fetch(this.base_url + url, {
                    method: 'post',
                    headers: {...this.headers},
                    body: JSON.stringify(params),
                }).then(res => res.text()).then(res => {
                    const data = JSON.parse(res)
                    if (data.code === 1) {
                        vant.Toast.success('提交成功');
                        this.getInfo();
                    } else {
                        vant.Toast.fail(data.msg);
                    }
                })
            },
            // 时间转换
            getTime(timestamp) {
                let time = JSON.stringify(timestamp)
                if (time.length >= 10) {
                    time = timestamp * 1000
                }
                let date = new Date(time);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear(),
                    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1),
                    D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()),
                    h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()),
                    m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()),
                    s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
            }
        }
    })
</script>
<style>
    #app {
        background: #F4F5F9;
        height: 100vh;
        overflow: auto;
    }

    .pageIndex {
        padding: 15px 15px 100px;
        color: #202329;
    }

    .title {
        font-size: 16px;
        padding: 0 15px 15px;
        font-weight: bold;
        color: #202329;
    }

    .list {
        background-color: #ffffff;
        padding: 0 15px 30px;
        border-radius: 12px;
    }

    .list .item {
        font-size: 15px;
    }

    .list .item .label {
        color: #232323;
        font-weight: bold;
        white-space: nowrap;
        padding: 15px 10px;
        position: relative;
        margin-left: 4px;
    }

    .list .item .label:before {
        position: absolute;
        left: 0;
        top: 20px;
        content: '*';
        color: red;
    }

    .list .item .value {
        background: #f6f7f9;
        border-radius: 10px;
        padding: 15px 15px;
        font-size: 14px;
        line-height: 24px;
    }

    .list .item .value .img {
        width: 100%;
    }

    .list .item .value .img img {
        width: 100%;
        height: auto;
    }

    .list .item .value .richText img {
        width: 100%;
    }


    .btn_box {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #ffffff;
        display: flex;
        justify-content: space-around;
        padding: 10px 0;
    }

    .btn_box .btn {
        width: 150px;
    }
</style>
